<template>
  <div>
    <TopSubfield>我是顶部</TopSubfield>
    <div class="campus">
      <div class="pdd-banner-wrapper">
        <img src="../../../static/images/pdd_campus_banner_v5.jpg" alt="校园招聘海报">
      </div>
      <div class="pdd-campus-content" id="campus-content">
        <div class="pdd-recruit">
          <div class="pdd-recruit-label">
            <p>招聘流程</p>
          </div>
          <div class="pdd-recruit-content">
            <div class="pdd-recruit-nav">
              <div class="pdd-recruit-position-header">
                <div
                  class="pdd-recruit-position-header-title"
                  v-for="(item,index) in nav"
                  :key="index"
                >
                  <div
                    @click="handNav(item.ind)"
                    :class="navInd==item.ind?'pdd-recruit-position-header-current':''"
                  >{{item.text}}</div>
                  <p :class="navInd==item.ind?'pdd-recruit-position-header-current-nav':''"></p>
                </div>
              </div>
              <div class="togglePosition">
                <div class="pdd-recruit-nav-img">
                  <img
                    v-for="(item,index) in navImg"
                    :key="index"
                    @mouseover="handmouse(item.id)"
                    :class="navInd==1?'dibimg':''"
                    @click="handImg(item.id)"
                    :src="clinkInd == item.id ? item.numClick : mouseInd==item.id?item.numhover:item.num"
                  >
                </div>
                <div class="pdd-recruit-nav-content" v-show="!navInd==1">
                  <p v-for="(item,index) in legends" :key="index">
                    <label>{{item.text}}</label>
                    <span>{{item.content}}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pdd-recruit">
          <div class="pdd-recruit-label">
            <p>招聘岗位</p>
          </div>
          <div class="pdd-recruit-content">
            <div class="pdd-recruit-position">
              <div class="pdd-recruit-position-header">
                <div
                  class="pdd-recruit-position-header-title"
                  v-for="(item,index) in posts"
                  :key="index"
                >
                  <div
                    @click="handPosts(item.ind)"
                    :class="PostInd==item.ind?'pdd-recruit-position-header-current':''"
                  >{{item.text}}</div>
                  <p :class="PostInd==item.ind?'pdd-recruit-position-header-current-nav':''"></p>
                </div>
              </div>
              <div class="togglePosition">
                <section class="pdd-recruit-position-nav">
                  <div
                    :class="dutInd==item.id?'tec-pos-div pos_click':'tec-pos-div'"
                    v-for="(item,index) in dutpost"
                    :key="index"
                    @click="handdut(item.id)"
                  >
                    <img class="tec-pos-img" :src="item.duImg">
                    <p class="tec-pos-p">{{item.name}}</p>
                  </div>
                </section>
                <section class="pdd-recruit-position-detail">
                  <p class="pdd-recruit-position-detail-title">{{dutpost[dutInd].name}}</p>
                  <p class="pdd-recruit-position-detail-subtitle">【岗位职责】</p>
                  <p
                    class="pdd-recruit-position-detail-text"
                    v-for="(item,index) in dutpost[dutInd].duty"
                    :key="index"
                  >{{item}}</p>
                  <p class="pdd-recruit-position-detail-subtitle">【任职要求】</p>
                  <p
                    class="pdd-recruit-position-detail-text"
                    v-for="(item) in dutpost[dutInd].claim"
                    :key="item"
                  >{{item}}</p>
                  <div class="pdd-recruit-position-detail-mail"></div>
                  <div class="pdd-recruit-position-detail-mail">
                    <p>
                      简历还可投递到
                      <span style="color: red">pddcampus@pinduoduo.com</span>，
                    </p>
                    <br>
                    <p>邮件/简历命名格式：【官网】岗位-学校-专业-姓名。</p>
                  </div>
                  <p class="pdd-recruit-position-submit">
                    <a href="mailto:johndoe@sample.com">简历投递</a>
                  </p>
                </section>
              </div>
            </div>
          </div>
        </div>
        <div class="pdd-recruit">
          <div class="pdd-recruit-label">
            <p>关于我们</p>
          </div>
          <div class="pdd-recruit-content">
            <div class="pdd-recruit-companyinfo">
              <section class="pdd-recruit-companyinfo-text">
                <div v-for="(item,index) in description" :key="index">{{item}}</div>
              </section>
              <section class="pdd-recruit-companyinfo-video">
                <div class="pdd-recruit-companyinfo-video-detail">
                  <img class="poster" :src="banImg[banImgInd].imgUrl">
                  <img
                    class="play"
                    src="//cdn.pinduoduo.com/assets/img/pdd_recruit_video_content_play.png"
                  >
                </div>
                <div class="pdd-recruit-companyinfo-video-nav">
                  <div
                    :class="banImgInd==item.id?'video_click':'video'"
                    v-for="(item,index) in banImg"
                    :key="index"
                    @click="handbam(item.id)"
                  >
                    <img :src="item.imgUrl">
                    <div class="title">{{item.text}}</div>
                  </div>
                </div>
              </section>
            </div>
            <div id="pdd-video-container"></div>
          </div>
        </div>
        <div class="pdd-recruit">
          <div class="pdd-recruit-label">
            <p>常见问题</p>
          </div>
          <div class="pdd-recruit-content">
            <div id="pdd-video-container"></div>
            <div class="pdd-recruit-problem">
              <div class="problem">
                <p class="title">关于拼多多校园招聘</p>
                <ul>
                  <li v-for="(item,index) in advisory" :key="index">
                    <p class="question">{{item.Q}}</p>
                    <p class="answer">
                      {{item.A.A1}}
                      <span v-for="(items) in item.A.A2" :key="items">
                        <br>
                        {{items}}
                      </span>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottomSynopsis>我是底部</bottomSynopsis>
  </div>
</template>
<script>
import TopSubfield from "@/components/top/TopSubfield";
import bottomSynopsis from "@/components/bottom/bottomSynopsis";
export default {
  name: "campus",
  components: {
    TopSubfield,
    bottomSynopsis
  },
  data() {
    return {
      clinkInd: 1,
      mouseInd: 1,
      navImg: [],
      navImg1: [
        {
          id: 1,
          num: "../../../static/images/1.jpg",
          numClick: "../../../static/images/1_click.jpg",
          numhover: "../../../static/images/1_hover.jpg"
        },
        {
          id: 2,
          num: "../../../static/images/2.jpg",
          numClick: "../../../static/images/2_click.jpg",
          numhover: "../../../static/images/2_hover.jpg"
        },
        {
          id: 3,
          num: "../../../static/images/3.jpg",
          numClick: "../../../static/images/3_click.jpg",
          numhover: "../../../static/images/3_hover.jpg"
        },
        {
          id: 4,
          num: "../../../static/images/4.jpg",
          numClick: "../../../static/images/4_click.jpg",
          numhover: "../../../static/images/4_hover.jpg"
        }
      ],
      navImg2: [
        {
          id: 1,
          num: "../../../static/images/xuanjiang9.jpg",
          numClick: "../../../static/images/xuanjiang9.jpg",
          numhover: "../../../static/images/xuanjiang9.jpg"
        }
      ],
      nav: [
        {
          ind: 0,
          text: "招聘流程"
        },
        {
          ind: 1,
          text: "宣讲行程"
        }
      ],
      navInd: 0,
      legends: [
        {
          id: 0,
          text: "补录投递",
          content: "2018年11月5日-2019年1月31日"
        },
        {
          id: 1,
          text: "面向人群",
          content: "2019届毕业生（含2018年11月-2019年12月毕业的海外留学生"
        },
        {
          id: 2,
          text: "注 意",
          content: "每个同学最多只能申请一个职位~"
        }
      ],
      PostInd: 0,
      posts: [
        {
          ind: 0,
          text: "技术岗位"
        },
        {
          ind: 1,
          text: "非技术岗位"
        }
      ],
      dutpost: [],
      dutInd: 0,
      duties: {
        TechnicalPost: [
          {
            id: 0,
            name: "大数据研发工程师",
            duImg: "../../../static/images/BigDataEngineer.jpg",
            duty: [
              "1.参与拼多多大数据平台体系建设，持续集成相关工具产品，以及搭建大数据业务统一计算层等相关工作；",
              "2.参与拼多多数据仓库的架构设计和研发，挖掘数据价值，建设与管理百PB级的公共数据平台和服务系统，实现高质量数据的互通与共享；",
              "3.参与拼多多工具/内容/智能数据产品研发，挖掘数据价值，实现数据赋能业务；",
              "4.用数据提高效率和改变业务运营方式，规划数据技术发展方向，带动团队技术氛围。"
            ],
            claim: [
              "1.2019年应届毕业生，本科及以上学历，计算机相关专业；",
              "2.扎实的数据结构和算法能力，熟悉至少一种关系型数据库；",
              "3.熟悉一门数据处理语言，如SQL、JAVA、Python、Perl等；",
              "4.善于沟通，主动性好，逻辑思维能力较强，有较强的自我驱动和学习能力；"
            ],
            bonus: [
              "1.有Hadoop、Hive、Hbase、Kylin、Druid等分布式平台实践经验；",
              "2.有数据平台、数据仓库、数据产品研发、数据分析与挖掘等相关项目经验；",
              "3.有多线程、缓存、分布式、全栈开发经验。"
            ]
          },
          {
            id: 1,
            name: "Web前端研发工程师",
            duImg: "../../../static/images/FrontEndEngineer.jpg",
            duty: [
              "1.	参与客户端H5/微信H5/PC端Web日常需求分析和功能开发，优化用户体验；",
              "2.	与上下游团队密切配合，分析并给出最优的前端结构解决方案和效果实现；",
              "3.	参与Web端整体的架构设计、运行期性能优化，提升整体研发质量和效率。"
            ],
            claim: [
              "1.	2019年应届毕业生，本科及以上学历，计算机相关专业，热爱计算机科学和互联网技术；",
              "2.	具备扎实的数据结构和计算机系统基础，编码功底扎实；",
              "3.	可以熟练使用各种 Web 前端技术，包括HTML(5)/CSS(3)/Javascript等，并有相关的项目开发经验或成果；",
              "4.	有基于 Ajax 应用的开发经验，有 NodeJS 开发经验，或者有移动端开发经验为佳；",
              "5.	有较强的学习能力，有强烈的责任心和自我驱动力；",
              "6.	能及时关注和学习业界最新技术，具备较好的逻辑分析能力，个性开朗乐观，具备良好的沟通能力和团队合作精神。"
            ],
            bonus: []
          }
        ],
        Non_technicalPost: [
          {
            id: 0,
            name: "产品管培生",
            duImg: "../../../static/images/ProductManagementTrainee.jpg",
            duty: [
              "1. 根据用户诉求设计需求方案，撰写需求文档和交互原型；",
              "2. 作为产品汪，与程序猿和设计狮密切合作，推动需求落地。"
            ],
            claim: [
              "1. 2019届本科及以上学历，计算机相关专业优先；",
              "2. 好奇心与学习欲望强，沟通表达和逻辑能力强；",
              "3. 资深剁手党，热爱种草拔草，也喜欢交朋友；",
              "4. 抗压能力强，能够自主独立负责项目；",
              "5. 有一定产品经验更佳。"
            ],
            bonus: []
          },
          {
            id: 1,
            name: "设计管培生",
            duImg: "../../../static/images/DesignmentManagementTrainee.jpg",
            duty: [
              "1.	根据需求和产品方案，思考用户的使用场景；",
              "2.	根据对场景的理解，设计出优雅简单的交互和视觉设计。"
            ],
            claim: [
              "1.	2019届本科及以上学历，专业不限；",
              "2.	设计作品才是正义！Talk is cheap，show me the works！",
              "3.	有扎实的美术基础，对审美有过培养，也有自己的观感和喜好；",
              "4.	魔鬼都在细节里，希望你有对细节的极致考究。"
            ],
            bonus: []
          }
        ]
      },
      description: [
        "拼多多是一家商家入驻模式的第三方移动电商平台，将娱乐与分享的理念融入电商运营中，是中国新电商模式的开创者。目前平台拥有超过3.44亿的活跃买家和超过170万的活跃商家。公司已于2018年7月26日正式登陆纳斯达克全球精选板块，股票代码：PDD。",
        "在以人为先的理念下，拼多多融合物质消费与精神消费，用户可以通过拼单，与好友分享买到便宜好货的快乐。同时，还构建了分布式AI智能代理网络，将商品与消费者进行匹配，帮助海量订单精准触达制造工厂，在C2M模式下为消费者创造“便宜有好货”的价值。",
        "目前公司拥有一千多名员工，平均年龄仅26岁，其中70%毕业于世界知名高校，大量工程师曾服务于谷歌、微软等一流互联网公司。拼多多恪守本分价值观，致力于构建一个独立的公众机构，满足最广大用户的消费需求。我们永不放弃做正确的事，永不放弃为最广大人民群众创造价值。"
      ],
      banImgInd: 1,
      banImg: [
        {
          id: 1,
          imgUrl: "../../../static/images/19_recruit_video_1_small.jpg",
          text: "拼多多-拼单省更多！"
        },
        {
          id: 2,
          imgUrl: "../../../static/images/19_recruit_video_2_small.jpg",
          text: "拼多多洗脑神曲来袭！"
        },
        {
          id: 3,
          imgUrl: "../../../static/images/19_recruit_video_3_small.jpg",
          text: "何老师揭秘大侦探破案三字秘籍："
        },
        {
          id: 4,
          imgUrl: "../../../static/images/19_recruit_video_4_small.jpg",
          text: "天霸陈赫机智拼单化解艰难任务！"
        },
        {
          id: 5,
          imgUrl: "../../../static/images/19_recruit_video_5_small.jpg",
          text: "面对拼题大考验，小猎豹竟然……"
        },
        {
          id: 6,
          imgUrl: "../../../static/images/19_recruit_video_6_small.jpg",
          text: "小猪罗志祥为拼多多献上热舞style"
        },
        {
          id: 7,
          imgUrl: "../../../static/images/19_recruit_video_7_small.jpg",
          text: "录制现场众人神秘失踪，原来大家都在……"
        }
      ],
      advisory: [
        {
          Q: "Q: 拼多多2019届校园招聘大概在什么时候开始？",
          A: {
            A1:
              "2019届校园招聘于8月13号全面启动，同学们可以登录校园招聘官网注册并投递简历申请自己感兴趣的岗位。全国巡回校园宣讲会预计在9月中上旬至10月下旬陆续进行。"
          }
        },
        {
          Q: "Q: 公司本次校园招聘岗位有哪些？有专业限制吗？",
          A: {
            A1:
              "A: 拼多多面向2019届毕业生开放的岗位涵盖技术、产品、市场、运营、职能等多类岗位，同学们可以在官网或公众号上了解具体的岗位详情及要求。只要你的兴趣和能力与职位要求相匹配，都可以申请应聘相关工作岗位，并无严格的专业限制。"
          }
        },
        {
          Q: "Q: 简历可以通过哪些渠道投递呢?",
          A: {
            A1:
              "A: 简历投递的方式有以下三种，任选其一都能参加拼多多2019校园招聘噢~无须重复投递",
            A2: [
              "1）登录校园招聘官网www.pinduoduo.com，注册账号并投递简历",
              "2）简历直接投递到邮箱：pddcampus@pinduoduo.com，简历标题格式为：应聘岗位-学校-专业-姓名。",
              "3）通过找拼多多工作的学长学姐内推，可免简历筛选直通笔试；"
            ]
          }
        },
        {
          Q:
            "Q: 如果今年早些时候申请拼多多实习生、学霸批未通过甄选，是否可以继续参加今年的校园招聘？",
          A: {
            A1:
              "A: 我们一直以发展的眼光看待问题，如果你今年参加了实习生、学霸批招聘未通过筛选，你仍然可以在官网上再次申请你所意向的岗位。"
          }
        },
        {
          Q: "Q: 简历提交之后，还能修改个人信息或变更投递岗位吗？",
          A: {
            A1:
              "A: 一旦投递成功，简历内容便不能更改，请确保内容无误再申请职位噢！"
          }
        },
        {
          Q: "Q: 如果我所在的城市不在拼多多的校园宣讲行程中，我应该怎么办？",
          A: {
            A1:
              "A: 首先，你可以通过我们的校园招聘官方网站www.pinduoduo.com申请职位并投递简历。然后，可就近选择有宣讲会城市参加笔试、面试等甄选环节，也可通过远程面试参与。"
          }
        },
        {
          Q: "Q: 拿到了拼多多校园招聘的offer，能否马上到公司实习？",
          A: {
            A1:
              "A: 如果你拿到Offer后，距离毕业还有较长的一段时间，那么你可以向hr申请到公司实习。具体的申请办法将在offer发放完毕后统一进行沟通。"
          }
        },
        {
          Q: "Q: 拼多多对应聘者的在校成绩、专业学历有什么要求？",
          A: {
            A1:
              "A: 首先，拼多多在具体的甄选标准上对专业学历、在校成绩没有硬性要求。但是，本着择优录用的原则，我们认为学生的在校成绩也是衡量人才能力的标准之一。"
          }
        },
        {
          Q: "Q: 公司对员工的语言要求是什么？",
          A: {
            A1:
              "A: 不同的岗位对英语的要求程度不同，对多数岗位来说，员工应具备基本的英语听说读写能力，部分岗位要求员工具备优秀的英语或其他语种（如韩语、日语等）的听说读写能力。"
          }
        },
        {
          Q:
            "Q: 如果在申请的过程中被拒，是否会有相关通知，大概多长时间能够收到通知？",
          A: {
            A1:
              "A: 由于每年校园招聘项目的申请人数众多，我们会优先在第一时间通知通过每轮甄选的学生。对于未能通过甄选的同学，我们暂时不能保证以拒信的方式知会到每一位同学，也请大家多多谅解。"
          }
        },
        {
          Q:
            "大家如果还有更多的疑问，请发送email到hr团队邮箱（pddcampus@pinduoduo.com），我们会尽快为大家解答。",
          A: {
            A1: ""
          }
        }
      ]
    };
  },
  mounted(){
    this.init();
  },
  methods: {
    init(){
        window.scrollTo(0,0);
    },
    //点击某个招聘流程某个标题
    handNav(ind) {
      this.navInd = ind;
      if (ind == 0) {
        this.navImg = this.navImg1;
      } else if (ind == 1) {
        this.navImg = this.navImg2;
      }
    },
    //点击技术/非技术岗位
    handPosts(ind) {
      this.PostInd = ind;
      this.dutInd = 0;
      if (ind == 0) {
        this.dutpost = this.duties.TechnicalPost;
      } else if (ind == 1) {
        this.dutpost = this.duties.Non_technicalPost;
      }
    },
    //点击某个岗位
    handdut(ind) {
      this.dutInd = ind;
    },
    //点击某张轮播图
    handbam(ind) {
      this.banImgInd = ind;
    },
    //点击招聘流程下某张图
    handImg(ind) {
      this.clinkInd = ind;
    },
    //悬停在招聘流程下某张图上
    handmouse(ind) {
      this.mouseInd = ind;
    }
  },
  created() {
    this.navImg = this.navImg1;
    this.dutpost = this.duties.TechnicalPost;
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/campus.css";
// @import "//cdn.pinduoduo.com/assets/css/campus_v1_679d81c2360419a7dcb3355592343091.css";
.campus {
  .pdd-banner-wrapper {
    margin: 0 auto;
    position: relative;
    width: 100%;
    background-color: #fff;
    img {
      width: 100%;
      display: block;
      margin: 0 auto;
    }
  }

  .pdd-campus-content .pdd-recruit {
    .pdd-recruit-label p {
      font-size: 18px;
    }
    .pdd-recruit-content {
      .pdd-recruit-nav {
        .pdd-recruit-nav-img {
          .dibimg {
            width: 90%;
            height: 300px;
          }
        }
        .pdd-recruit-position-header .pdd-recruit-position-header-title div {
          font-size: 20px;
        }
        .pdd-recruit-nav-content {
          label {
            font-size: 14px;
          }
          span {
            font-size: 14px;
          }
        }
      }
      .pdd-recruit-position {
        .togglePosition .pdd-recruit-position-detail {
          width: 950px;
          .pdd-recruit-position-detail-text {
            line-height: 20px;
          }
          .pdd-recruit-position-detail-title {
            font-size: 14px;
          }
          .pdd-recruit-position-submit {
            width: 120px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            a {
              color: #fff;
            }
          }
        }
        .pdd-recruit-position-header .pdd-recruit-position-header-title div {
          font-size: 20px;
        }
      }
      .pdd-recruit-companyinfo {
        .pdd-recruit-companyinfo-text div {
          width: 30%;
          font-size: 18px;
          line-height: 18px;
        }
        .pdd-recruit-companyinfo-video {
          .pdd-recruit-companyinfo-video-detail {
            width: 76%;
            height: 400px;
          }
          .pdd-recruit-companyinfo-video-nav {
            width: 20%;
            height: 400px;
            .title {
              font-size: 12px;
            }
          }
        }
      }
      .pdd-recruit-problem .problem {
        .title {
          font-size: 14px;
        }
        ul li {
          .question {
            font-size: 12px;
          }
          .answer {
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>


